<!--
  -    Copyright (c) 2018-2025, lengleng All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: lengleng (wangiegie@gmail.com)
  -->

<template>
  <!--弹窗内容-->
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="用户名" v-model="listQuery.username"></el-input>
      <el-button class="filter-item" style="margin-left: 20px;margin-right: 20px;" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
      <el-radio-group @change="handleChangeType" style="vertical-align: top;margin-top: 2px;" v-model="type" size="medium">
        <el-radio label="1" border>PC商城</el-radio>
        <el-radio label="2" border>APP</el-radio>
      </el-radio-group>
    </div>
    <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 99%">
      <div v-if="type === '1'">
        <el-table-column align="center" label="商品名称">
          <template slot-scope="scope">
            <img class="goodImg" :src="scope.row.imageUrl" />
            <span>{{scope.row.title}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" class-name="status-col" label="所在栏目">
          <template slot-scope="scope">
            <span >{{getTrendType(scope.row.trendsId)}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" class-name="status-col" label="来源">
          <template slot-scope="scope">
            <span>{{scope.row.source}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" class-name="status-col" label="创建时间">
          <template slot-scope="scope">
            <span>{{scope.row.createTime}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" class-name="status-col" label="描述">
          <template slot-scope="scope">
            <span>{{scope.row.description}}</span>
          </template>
        </el-table-column>
      </div>
      <div v-if="type === '2'">
        <el-table-column align="center" label="商品名称">
          <template slot-scope="scope">
            <img class="goodImg" v-if="scope.row.pictures && scope.row.pictures.length > 0" :src="scope.row.pictures[0].picture" />
            <span>{{scope.row.title}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" class-name="status-col" label="信息类型" >
          <template slot-scope="scope">
            <span v-if="scope.row.columnType === '2'">{{getInforType(scope.row.informationType)}}</span>
            <span v-if="scope.row.columnType === '1'">时尚大咖</span>
          </template>
        </el-table-column>
        <el-table-column align="center" class-name="status-col" label="发布人">
          <template slot-scope="scope">
            <span>{{scope.row.publisher}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" class-name="status-col" label="所在栏目">
          <template slot-scope="scope">
            <span  v-if="scope.row.columnType === '1'">图片</span>
            <span  v-if="scope.row.columnType === '2'">文本</span>
          </template>
        </el-table-column>
        <el-table-column align="center" class-name="status-col" label="发布时间">
          <template slot-scope="scope">
            <span>{{scope.row.createTime}}</span>
          </template>
        </el-table-column>
      </div>
      <el-table-column align="center" label="操作" width="300" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="handleCheckDetail(scope.row)">查看</el-button>
          <el-button size="mini" type="success" @click="updatePublishInfo(scope.row)">编辑</el-button>
          <el-button size="mini"  type="danger" @click="shanchu(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNo" :page-sizes="[10,20,30, 50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <el-dialog title="查看详细信息" :visible.sync="infoDialog">
      <div>
        <span class="title" style="margin-left: 30px;">基本信息:</span>
      </div>
        <el-form :label-position="labelPosition" label-width="100px" :model="form" ref="form">
          <el-form-item label="标题名称:" v-if="columnTypes == 2">
            <span class="inputRow">{{form.title}}</span>
          </el-form-item>
          <el-form-item label="所在栏目:" v-if="type === '1'">
            <span class="inputRow" v-if="form.trendsId === 1">Styles</span>
            <span class="inputRow" v-if="form.trendsId === 2">Patterns</span>
            <span class="inputRow" v-if="form.trendsId === 3">Fabric</span>
            <span class="inputRow" v-if="form.trendsId === 4">Accessories</span>
          </el-form-item>
          <el-form-item label="创建时间:" v-if="type === '1'">
            <span class="inputRow">{{form.createTime}}</span>
          </el-form-item>
          <el-form-item label="来源:" v-if="type === '1'">
            <span   class="inputRow">{{form.source}}</span>
          </el-form-item>
          <el-form-item label="正文内容:"  v-if="type === '1' ">
            <Ueditor :default-msg='defaultMsg' :config=config id="ue"  ref="ue"></Ueditor>
          </el-form-item>
          <div v-if="type === '1'">
            <span class="title">图片信息:</span>
            <img :src="form.imageUrl" class="topPic"/>
          </div>
          <!--app查看信息内容-->
          <el-form-item label="所在栏目:" v-if="type === '2'">
            <span   class="inputRow">{{columnTypeText}}</span>
          </el-form-item>
          <el-form-item label="信息简短概述:" v-if="type === '2' && columnTypes == 2">
            <span class="inputRow">{{form.briefOverview}}</span>
          </el-form-item>
          <el-form-item label="信息类型:" v-if="type === '2'  && columnTypes == 2">
            <span   class="inputRow">{{informationTypeText}}</span>
          </el-form-item>
          <el-form-item label="正文内容:"  v-if="type === '2' && columnTypes == 2">
            <Ueditor :default-msg='defaultMsg' :config=config id="ue1"  ref="ue1"></Ueditor>
          </el-form-item>
          <el-form-item label="图片信息" v-if="type === '2' && columnTypes == 1">
            <img width="250" :src="item.picture" alt="" v-for="(item, index) in form.pictures" :key="index">
          </el-form-item>
          <el-form-item label="信息来源:" v-if="type === '2'">
            <span   class="inputRow">{{form.informationSource}}</span>
          </el-form-item>
          <el-form-item label="信息发布人:" v-if="type === '2'">
            <span   class="inputRow">{{form.publisher}}</span>
          </el-form-item>
        </el-form>
    </el-dialog>


    <el-dialog title="资讯信息修改" :visible.sync="updateinfoDialog">
      <div>
        <span class="title" style="margin-left: 30px;">修改基本信息:</span>
      </div>
      <el-form :label-position="labelPosition" label-width="100px" :model="form" ref="form" :rules="rules">
        <el-form-item label="标题:" prop="title" v-if="columnTypes == 2">
          <el-input v-model="form.title" placeholder="请输入商品标题"></el-input>
        </el-form-item>
        <!--pc商城-->
        <el-form-item label="所在栏目:" prop="trendsId" v-if="type === '1'">
          <el-select v-model="trendsVal" placeholder="请选择所在栏目"  @change="changeTrendsId(form.trendsId)" >
            <el-option
              v-for="item in trendList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="来源:" prop="soure" v-if="type === '1'">
          <el-input v-model="form.source"  placeholder="请输入来源" ></el-input>
        </el-form-item>
        <el-form-item label="简短描述:" prop="description" v-if="type === '1'">
          <el-input v-model="form.description"  placeholder="请输入简短描述" ></el-input>
        </el-form-item>
        <div v-if="type === '1'">
          <span class="title">描述信息:</span>
          <Ueditor :default-msg='defaultMsg' :config=config id="ue3"  ref="ue3"></Ueditor>
        </div>
        <div v-if="type === '1'">
          <span class="title">图片信息:</span>
        </div>
        <div v-if="type === '1'">
          <el-upload
            action="/app/sys/oss/upload"
            list-type="picture-card"
            :file-list="pictureList"
            :multiple="false"
            :limit="1"
            :on-success="handleUploadSuccess"
            :on-remove="handleRemove"
            :on-preview="handlePictureCardPreview">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </div>

        <!--app编辑-->
        <el-form-item label="信息类型:" prop="soure" v-if="type === '2' && columnTypes == 2">
          <el-select v-model="form.informationType" placeholder="请选择信息类型" @change="changeInformation(form.informationType)" >
            <el-option
              v-for="item in inforList"
              :key="item.value"
              :label="item.description"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在栏目:" v-if="type === '2' && columnTypes == 2">
          <span class="inputRow" style="width: 75%;border: 1px solid #dcdfe6">{{columnTypeText}}</span>
        </el-form-item>
        <el-form-item label="信息简短概述:" v-if="type === '2' && columnTypes == 2">
          <el-input type="textarea" rows="5" v-model="form.briefOverview" placeholder="请输入信息简短概述"></el-input>
        </el-form-item>
        <el-form-item label="正文内容:" v-if="type === '2' && columnTypes == 2">
          <Ueditor :default-msg='defaultMsg' :config=config id="ue2"  ref="ue2"></Ueditor>
        </el-form-item>
        <el-form-item label="图片信息" v-if="type === '2' && columnTypes == 1">
          <div>
            <el-upload
              action="app/sys/oss/upload"
              list-type="picture-card"
              :file-list="pictureList"
              :multiple="true"
              :on-success="handleUploadSuccess"
              :on-remove="handleRemove"
              :on-preview="handlePictureCardPreview">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </div>
        </el-form-item>
        <!--app 中等于文本的-->
        <el-form-item label="图片信息" v-if="type === '2' && columnTypes == 2">
          <div>
            <el-upload
              action="app/sys/oss/upload"
              list-type="picture-card"
              :file-list="pictureList"
              :multiple="false"
              :limit="1"
              :on-success="handleUploadSuccess"
              :on-remove="handleRemove"
              :on-preview="handlePictureCardPreview">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </div>
        </el-form-item>
        <el-form-item label="信息来源:" v-if="type === '2' ">
          <el-input  v-model="form.informationSource" placeholder="请输入信息来源"></el-input>
        </el-form-item>
        <el-form-item label="信息发布人:" v-if="type === '2'">
          <el-input  v-model="form.publisher" placeholder="请输入信息发布人"></el-input>
        </el-form-item>
      </el-form>
      <div class="displayImg" :class="prority? 'prodisplayImg': ''" @click="setPrority()" v-if="type === '1'">
        Whether to set the priority display？
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button>取 消</el-button>
        <el-button type="primary" @click="publishGood">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
  import { getGoodDetail, fanhallBanner, deleteGood } from '@/api/goods'
  import { getFanHallList } from '@/api/fanhallList'
  import { mapGetters } from 'vuex'
  import Ueditor from '@/components/ueditor'
  import waves from '@/directive/waves/index.js' // 水波纹指令

  export default {
    components: {
      Ueditor
    },
    name: 'seller_index',
    directives: {
      waves
    },
    data() {
      return {
        // 富文本编辑器
        defaultMsg: '',
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 350
        },
        ue1: 'ue1', // 不同编辑器必须不同的id
        infoDialog: false, // 弹窗显示
        updateinfoDialog: false, // 修改信息弹窗
        textarea2: '', // 描述信息
        status: '1',
        columnTypes: '', // 范堂图片或者文本类型
        showIndex: '0', // 设置优先级
        id: '', // 商品id
        // trendsType: '', // 一级类目id
        dialogImageUrl: '',
        prority: false, // 是否设置优先级
        dialogVisible: false,
        list: null, // 列表数据
        total: null, // 总条数
        listLoading: true, // loading
        role: [],
        trendsVal: '',
        informationTypeText: '',
        columnTypeText: '',
        pictureList: [], // 图片列表
        trendList: [], // 趋势列表
        lanmuList: [], // 栏目类型数组
        inforList: [], // 信息类型数组
        labelPosition: 'right',
        listQuery: { // 请求列表参数
          pageNo: 1,
          pageSize: 6
        },
        mianliaoShow: false, // 面料展示
        form: {
          title: '',
          trendsId: '',
          createTime: '',
          source: '',
          article: '',
          imageUrl: '',
          briefOverview: '',
          columnType: '',
          informationSource: '',
          publisher: '',
          description: '',
          modularType: '',
          informationType: '',
          text: '',
          pictures: []
        },
        // 规格约束
        rules: {
          goodsName: [
            {
              required: true,
              message: '商品名称没填',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 40,
              message: '长度在 1 到 40 个字符',
              trigger: 'blur'
            }
          ]
        },
        goodDetail: {}, // 商品详情
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        type: '1', // 类型
        result: '1', // 审核结果
        dialogStatus: '',
        isDisabled: {
          0: false,
          1: true
        },
        tableKey: 0
      }
    },
    computed: {
      ...mapGetters(['permissions'])
    },
    filters: {
    },
    created() {
      // this.getList()
      const that = this
      that.sys_user_del = that.permissions['sys_user_del']
      // 获取商品类目标签
    },
    mounted: function() {
      const that = this
      that.getGoodsList()
      const url = '/app/mall/trends/list'
      fanhallBanner(url, {}).then(response => {
        that.trendList = response.data.data
      })
      const informationUrl = '/app/dict/information_type'
      fanhallBanner(informationUrl, {}).then(response => {
        that.inforList = response.data.data
      })
      const columnUrl = '/app/dict/column_type'
      fanhallBanner(columnUrl, {}).then(response => {
        that.lanmuList = response.data.data
      })
    },
    methods: {
      getGoodsList() {
        const that = this
        that.list = []
        if (that.type === '2') {
          getFanHallList(that.listQuery).then(response => {
            that.listLoading = false
            // console.log(response.data.data.records)
            that.list = response.data.data.records
            that.total = response.data.data.total
          })
        } else {
          const param = {
            pageNo: that.listQuery.pageNo,
            pageSize: that.listQuery.pageSize,
            trendsId: ''
          }
          const url = '/app/mall/trendsDetail/page'
          fanhallBanner(url, param).then(response => {
            // console.log(response.data.data.records)
            that.listLoading = false
            that.list = response.data.data.records
            that.total = response.data.data.total
          })
        }
      },
      // 切换所在栏目
      changeTrendsId(type) {
        const that = this
        that.form.trendsId = type
      },
      // 获取信息类型
      getInforType(type) {
        let str = ''
        this.inforList.forEach(function(item) {
          if (item.value === type) {
            str = item.description
          }
        })
        return str
      },
      getTrendType(type) {
        let str = ''
        this.trendList.forEach(function(item) {
          if (item.id === type) {
            str = item.name
          }
        })
        return str
      },
      // 是否设置优先显示
      setPrority() {
        const that = this
        that.prority = !that.prority
        if (that.prority) {
          that.showIndex = '1'
        } else {
          that.showIndex = '0'
        }
      },
      searchinformation() {
        const that = this
        that.getGoodsList()
      },
      handleUploadSuccess(response, file, fileList) {
        this.pictureList = fileList
        // console.log(this.pictureList)
      },
      // 图片删除
      handleRemove(file, fileList) {
        this.pictureList = fileList
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      handleFilter() { // 搜索
        this.listQuery.pageNo = 1
        this.getGoodsList()
      },
      // 改变栏目类型
      changeColumn(coltype) {
        // console.log(coltype)
      },
      // 改变信息类型
      changeInformation(infotype) {
        // console.log(infotype)
      },
      handleChangeType() { // 切换类型
        this.listQuery.pageNo = 1
        // console.log(this.type)
        this.getGoodsList()
      },

      cancel() {
        const that = this
        that.infoDialog = false
      },
      handleCurrentChange(val) { // 页码切换
        this.listQuery.pageNo = val
        this.getGoodsList()
      },
      handleSizeChange(val) { // 页面大小切换
        this.listQuery.pageSize = val
        this.getGoodsList()
      },
      // 点击查看出现弹框
      handleCheckDetail(row) {
        const that = this
        if (that.type === '1') {
          const url = '/app/mall/trendsDetail' + '/' + row.id
          getGoodDetail(url, {}).then(response => {
            that.form = response.data.data
            that.defaultMsg = response.data.data.article
            // console.log(that.defaultMsg)
            that.infoDialog = true
            that.updateinfoDialog = false
            // that.form = that.goodDetail
          })
        } else {
          const url = '/app/yykFashionLobby/' + row.id
          getGoodDetail(url, {}).then(response => {
            that.form = response.data.data
            // console.log(response.data.data)
            that.defaultMsg = response.data.data.text
            that.infoDialog = true
            that.updateinfoDialog = false
            that.columnTypes = response.data.data.columnType
            const inforUrl = '/app/dict/info'
            const param = {
              type: 'information_type',
              value: response.data.data.informationType
            }
            getGoodDetail(inforUrl, param).then(response => {
              that.informationTypeText = response.data.data.description
              // console.log(that.informationTypeText)
            })
            const columnParam = {
              type: 'column_type',
              value: that.form.columnType
            }
            getGoodDetail(inforUrl, columnParam).then(response => {
              that.columnTypeText = response.data.data.description
            })
          })
        }
      },
      // 编辑
      updatePublishInfo(row) {
        const that = this
        that.id = row.id
        if (that.type === '1') {
          const url = '/app/mall/trendsDetail' + '/' + row.id
          getGoodDetail(url, {}).then(response => {
            that.form = response.data.data
            that.defaultMsg = that.form.article
            that.infoDialog = false
            that.updateinfoDialog = true
            that.pictureList = []
            const url = response.data.data.imageUrl
            // console.log(url)
            const obj = {
              url: url
            }
            that.pictureList.push(obj)
            const trendsUrl = '/app/mall/trends/' + that.form.trendsId
            getGoodDetail(trendsUrl, {}).then(response => {
              that.trendsVal = response.data.data.name
            })
          })
        } else {
          const fanhallUrl = '/app/yykFashionLobby/' + row.id
          getGoodDetail(fanhallUrl, {}).then(response => {
            that.form = response.data.data
            that.defaultMsg = response.data.data.text
            that.infoDialog = false
            that.updateinfoDialog = true
            that.columnTypes = response.data.data.columnType
            const inforUrl = '/app/dict/info'
            const param = {
              type: 'information_type',
              value: that.form.informationType
            }
            getGoodDetail(inforUrl, param).then(response => {
              that.informationTypeText = response.data.data.description
            })
            const columnParam = {
              type: 'column_type',
              value: that.form.columnType
            }
            getGoodDetail(inforUrl, columnParam).then(response => {
              that.columnTypeText = response.data.data.description
            })
            that.pictureList = []
            if (that.form.pictures && that.form.pictures.length > 0) {
              for (let i = 0; i < that.form.pictures.length; i++) {
                const obj = {
                  url: that.form.pictures[i].picture
                }
                that.pictureList.push(obj)
              }
            }
          })
        }
      },

      // 删除
      shanchu(row) {
        const that = this
        if (that.type === '1') {
          const url = '/app/operate/trends/detail/delete/' + row.id
          deleteGood(url, {}).then(response => {
            that.getGoodsList()
          })
        } else {
          const url = '/app/yykFashionLobby/delete/' + row.id
          fanhallBanner(url, {}).then(response => {
            that.getGoodsList()
          })
        }
      },
      // 进行发布
      publishGood() {
        const that = this
        // pc商城
        if (that.type === '1') {
          const picpcarr = []
          that.pictureList.forEach(function(item) {
            const obj = {}
            if (item.response) {
              obj.picture = item.response.data
              obj.url = ''
            } else {
              obj.picture = item.url
              obj.url = ''
            }
            picpcarr.push(obj)
          })
          var articlePcText = ''
          that.$refs.ue3.getUEContent()
          articlePcText = that.$refs.ue3.getUEContent()
          const param = {
            id: that.id,
            trendsId: that.form.trendsId,
            title: that.form.title,
            imageUrl: picpcarr[0].picture,
            description: that.form.description,
            article: articlePcText,
            source: that.form.source,
            showIndex: that.showIndex
          }
          const url = '/app/operate/trends/detail/update'
          deleteGood(url, param).then(response => {
            that.updateinfoDialog = false
            that.getGoodsList()
          })
        } else {
          // app商城
          var picarr = []
          // console.log(that.pictureList)
          that.pictureList.forEach(function(item) {
            const obj = {}
            if (item.response) {
              obj.picture = item.response.data
              obj.url = ''
            } else {
              obj.picture = item.url
              obj.url = ''
            }
            picarr.push(obj)
          })
          var articleText = ''
          if (that.columnTypes === '2') {
            articleText = that.$refs.ue2.getUEContent()
          } else {
            articleText = ''
          }
          const param = {
            modularType: '1',
            columnType: that.columnTypes,
            pictures: picarr,
            title: that.form.title,
            text: articleText,
            informationType: that.form.informationType,
            briefOverview: that.form.briefOverview,
            informationSource: that.form.informationSource,
            publisher: that.form.publisher,
            isSelected: '',
            id: that.id
          }
          const url = '/app/yykFashionLobby/edit'
          deleteGood(url, param).then(response => {
            that.updateinfoDialog = false
            that.getGoodsList()
          })
        }
      }
    }
  }
</script>
<style scoped>

  .title{
    font-weight: bold;
    font-size: 24px;
  }

  .el-input {
    position: relative;
    font-size: 14px;
    display: inline-block;
    width: 80% !important;
  }
  .el-form {
    margin-left: 36px;
  }
  .is-disabled{
    background-color: #fff;
  }
  .inputRow{
    background-color: #fff !important;
    display: block;
    width: 65%;
    min-height: 40px;
    /*line-height: 40px;*/
    padding-left: 20px;
    border: 1px solid #f5f5f5;
  }
  .el-input__inner{
    background-color: #fff !important;
  }
  .el-input__inner{
    background-color: #fff !important;
  }
  .textareaCon{
    width: 80%;
    border: 1px solid #f5f5f5;
    border-radius: 10px;
    margin-bottom: 20px;
    padding: 15px;
  }
  .el-select{
    width: 80% !important;
  }
  .imgContent{
    padding: 5px;
  }
  .picContent{
    width: 100%;
  }
  .goodImg {
    width: 30px;
    height: 30px;
  }
  .topPic{
    width: 300px;
  }
  .el-input{
    width: 80%;
  }
  .avatar{
    width: 250px;
  }
  .el-button--mini, .el-button--mini.is-round {
    padding: 7px 15px;
    margin-bottom: 10px
  }
  .displayImg{
    background: url(../../../assets/img/nochoose.jpg);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position-x: 2%;
    padding-left: 40px;
  }
  .prodisplayImg{
    background: url(../../../assets/img/choose.jpg);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 2% 5px;
    padding-left: 40px;
  }
</style>
